<template>
	<view style="line-height: 38rpx">
		<view class="flex_sbc">
			<view class="flex_fsc">
				<view class="line"></view>
				<view class="title-style">{{ endSwitchStatus ? '评选结果' : '大赛介绍' }}</view>
			</view>
			<view class="end-button" @click="endSwitchStatus = !endSwitchStatus">
				{{ endSwitchStatus ? '大赛介绍' : '评选结果' }}
			</view>
		</view>
		<view v-if="endSwitchStatus">
			<view v-for="res in resultList" :key="res.avatar" class="flex_fs uni-mt-32">
				<image :src="res.avatar" class="user-head" mode="aspectFill"></image>
				<view>
					<view class="text-w">{{ res.name }}</view>
					<view class="z-font-24 uni-mt-6" style="color: #525866">{{ res.intro }}</view>
				</view>
			</view>
		</view>
		<view v-else class="uni-ml-26 uni-mt-16 z-font-24" style="text-align: justify" v-html="introText"></view>
		<view class="flex_fsc uni-mt-20">
			<view class="line"></view>
			<view class="title-style">评选规则</view>
		</view>
		<view class="uni-ml-26 uni-mt-16 z-font-24" style="text-align: justify" v-html="ruleText"></view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { getResult } from '../../api/gold-medal-coach';
import { introText, ruleText } from './config';

const resultList = ref([]),
	endSwitchStatus = ref(true);
getResult().then((res) => {
	resultList.value = res;
});
</script>

<style lang="scss">
@import './index.scss';
</style>
